<script setup>
import {computed, ref} from "vue"
import {useSharedStore} from "@/store/sharedata";

// 聊天配置的对话框组件

const store = useSharedStore();

const data = ref({
  style: store.chatListStyle, // 聊天列表样式
  stream: store.chatStream, // 是否启用实时聊天流（默认true）
})

const props = defineProps({
  show: Boolean
})

const showDialog = computed(() => {
  return props.show
})

const emits = defineEmits(['hide'])
const close = () => {
  emits('hide', false)
}

</script>

<template>
  <el-dialog class="config-dialog" v-model="showDialog" :close-on-click-modal="true" :before-close="close" style="max-width: 600px" title="聊天配置">
    <div class="chat-setting">
      <el-form :model="data" label-width="100px" label-position="left">
        <el-form-item label="聊天样式：">
          <el-radio-group v-model="data.style" @change="(val) => {store.setChatListStyle(val)}">
            <el-radio value="list">列表样式</el-radio>
            <el-radio value="chat">对话样式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="流式输出：">
          <el-switch v-model="data.stream" @change="(val) => {store.setChatStream(val)}"/>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped lang="stylus">
.chat-setting {

}
</style>